<template>
  <div class="home-page-container" id="home"
       v-wechat-title="'UUM博客'">
    <img src="../assets/img/1.jpg" class="home-page-banner">
    <div class="home-page-content"
         v-infinite-scroll="handleQuery"
         :infinite-scroll-delay="300"
         :infinite-scroll-disabled="disabled">
      <ArticleBox/>
      <div class="home-page-content-card">
        <card-for-me></card-for-me>
        <card-for-hot-article></card-for-hot-article>
        <card-for-tag :info="tagList" who="tag"></card-for-tag>
        <card-for-tag :info="categoryList" who="category"></card-for-tag>
      </div>
    </div>
    <el-tooltip placement="top" content="回到顶部">
      <back-to-top :document-id="'home'"
                   :visibility-height="800"
                   :back-position="450" transition-name="fade"/>
    </el-tooltip>
  </div>
</template>

<script>
import ArticleBox from '@/components/Article-box'
import CardForMe from "@/components/Card/CardForMe";
import CardForTag from "@/components/Card/CardForTag";
import CardForHotArticle from "@/components/Card/CardForHotArticle";
import {getLabelList} from '@/api/label'
import {visit} from "@/api/user";
import {getCategoryList} from '@/api/category'
import {mapGetters} from "_vuex@3.6.2@vuex";
import {listBlog} from "@/api/blog";
import BackToTop from '@/components/BackToTop'


export default {
  name: "Index",
  components: {CardForMe, CardForTag, CardForHotArticle, ArticleBox,BackToTop},
  computed: {
    ...mapGetters(['currentPage', 'pageSize', 'total', 'searchKey', 'loading']),
    noMore() {
      return this.currentPage * this.pageSize >= this.total
    },
    disabled() {
      return this.loading || this.noMore
    }
  },
  data() {
    return {
      tagList: {},
      categoryList: {},
    };
  },
  methods: {
    handleQuery() {
      let queryParams = {
        'currentPage': ++this.$store.state.blog.currentPage,
        'pageSize': this.pageSize
      }
      if (this.searchKey) {
        queryParams.keyword = this.searchKey
      }
      this.$store.commit('SET_BLOG_LOADING', true);
      listBlog(queryParams).then(res => {
        if (res.status) {
          let article = this.$store.getters.article;
          let source = res.data.source;
          source.forEach(item => {
            article.push(item)
          })
          this.$store.commit('SET_BLOG_LOADING', false)
          this.$store.commit('SET_BLOG_LIST', article)
        } else {
          this.handleQuery()
        }
      })
    },
    selectLabelList() {
      getLabelList().then(res => {
        if (res.status) {
          this.tagList = res.data
        }
      })
    },
    selectSortList() {
      getCategoryList().then(res => {
        if (res.status) {
          this.categoryList = res.data
        } else {
          this.$message.error('分类获取失败')
        }
      })
    },
  },
  created() {
    visit()
    this.selectLabelList()
    this.selectSortList()
  }
}
</script>

<style scoped>

</style>
